<template>
	<view class="order_bg">
		<view class="order_tabs">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#F3060D"></u-tabs>
		</view>
		<view v-if="current == 0" style="padding:100rpx 0rpx 110rpx 0rpx;">
			<view style="padding: 0rpx 20rpx;margin-bottom: 20rpx;" v-for="(item,index) in dataList" :key="index">
				<view class="order_all">
					<view class="order_im">
						<view class="imga">
						<!-- 	<view class="information_nn">纯牛奶</view>
							<view class="information_ns">巴氏杀菌</view> -->
							<image class="information_img" src="@/static/commodity.png"></image>
						</view>
						<view class="imga_r">
							<view>
								<view class="imga_r_o">
									<view class="imga_r_size">订单号:789451236123</view>
									<view class="imga_r_dps">待配送</view>
								</view>
								<view class="imga_mc">商品名称</view>
							</view>

							<view class="imga_bot">
								<view class="imga_bot_num">商品数量</view>
								<view class="imga_bot_mon">¥99</view>
							</view>
						</view>
					</view>
					<view class="xian"></view>
					<view class="bottoms">
						<view class="order_xzc"></view>
						<view class="btn_all">
							<view class="order_btnl"  @click="exportTable">打印小票(没有)</view>
							<view class="order_btn">发货(没有)</view>
						</view>
					</view>
				</view>
			</view>
			<view class="btn" style="padding: 0rpx 37rpx;">
				<view class="dc_btn">导出</view>
			</view>
		</view>
		
		<view v-if="current == 1" style="padding:100rpx 0rpx 110rpx 0rpx;">
			<view style="padding: 0rpx 20rpx;margin-bottom: 20rpx;" v-for="(item,index) in 20" :key="index">
				<view class="order_all">
					<view class="order_im">
						<view class="imga">
							<view class="information_nn">纯牛奶</view>
							<view class="information_ns">巴氏杀菌</view>
							<image class="information_img" src="@/static/commodity.png"></image>
						</view>
						<view class="imga_r">
							<view>
								<view class="imga_r_o">
									<view class="imga_r_size">订单号:789451236123</view>
									<view class="imga_r_dps">待配送</view>
								</view>
								<view class="imga_mc">商品名称</view>
							</view>
		
							<view class="imga_bot">
								<view class="imga_bot_num">商品数量</view>
								<view class="imga_bot_mon">¥99</view>
							</view>
						</view>
					</view>
					<view class="xian"></view>
					<view class="bottoms">
						<view class="order_xzc"></view>
						<view class="btn_all">
							<view class="order_btnl">核销</view>
							<view class="order_btn">备货</view>
						</view>
					</view>
				</view>
			</view>
			<view class="btn" style="padding: 0rpx 37rpx;">
				<view class="dc_btn">导出</view>
			</view>
		</view>
		
		<view v-if="current == 2" style="padding:100rpx 0rpx 110rpx 0rpx;">
			<view style="padding: 0rpx 20rpx;margin-bottom: 20rpx;" v-for="(item,index) in 20" :key="index">
				<view class="order_all">
					<view class="order_im">
						<view class="imga">
							<view class="information_nn">纯牛奶</view>
							<view class="information_ns">巴氏杀菌</view>
							<image class="information_img" src="@/static/commodity.png"></image>
						</view>
						<view class="imga_r">
							<view>
								<view class="imga_r_o">
									<view class="imga_r_size">订单号:789451236123</view>
									<view class="imga_r_dps">待配送</view>
								</view>
								<view class="imga_mc">商品名称</view>
							</view>
		
							<view class="imga_bot">
								<view class="imga_bot_num">商品数量</view>
								<view class="imga_bot_mon">¥99</view>
							</view>
						</view>
					</view>
					<!-- <view class="xian"></view>
					<view class="bottoms">
						<view class="order_xzc">配送地址:辽宁省沈阳市铁西区金山路30号12312312132123</view>
						<view class="btn_all">
							<view class="order_btnl">同意</view>
							<view class="order_btn">发货</view>
						</view>
					</view> -->
				</view>
			</view>
			<view class="btn" style="padding: 0rpx 37rpx;">
				<view class="dc_btn">导出</view>
			</view>
		</view>
		
		<view v-if="current == 3" style="padding:100rpx 0rpx 110rpx 0rpx;">
			<view style="padding: 0rpx 20rpx;margin-bottom: 20rpx;" v-for="(item,index) in 20" :key="index">
				<view class="order_all">
					<view class="order_im">
						<view class="imga">
							<view class="information_nn">纯牛奶</view>
							<view class="information_ns">巴氏杀菌</view>
							<image class="information_img" src="@/static/commodity.png"></image>
						</view>
						<view class="imga_r">
							<view>
								<view class="imga_r_o">
									<view class="imga_r_size">订单号:789451236123</view>
									<view class="imga_r_dps">待配送</view>
								</view>
								<view class="imga_mc">商品名称</view>
							</view>
		
							<view class="imga_bot">
								<view class="imga_bot_num">商品数量</view>
								<view class="imga_bot_mon">¥99</view>
							</view>
						</view>
					</view>
					<view class="xian"></view>
					<view class="bottoms">
						<view class="order_xzc">配送地址:辽宁省沈阳市铁西区金山路30号12312312132123</view>
						<view class="btn_all">
							<view class="order_btnl">驳回</view>
							<view class="order_btn">发货</view>
						</view>
					</view>
				</view>
			</view>
			<view class="btn" style="padding: 0rpx 37rpx;">
				<view class="dc_btn">导出</view>
			</view>
		</view>
		
		<view v-if="current == 4" style="padding:100rpx 0rpx 110rpx 0rpx;">
			<view style="padding: 0rpx 20rpx;margin-bottom: 20rpx;" v-for="(item,index) in 20" :key="index">
				<view class="order_all">
					<view class="order_im">
						<view class="imga">
							<view class="information_nn">纯牛奶</view>
							<view class="information_ns">巴氏杀菌</view>
							<image class="information_img" src="@/static/commodity.png"></image>
						</view>
						<view class="imga_r">
							<view>
								<view class="imga_r_o">
									<view class="imga_r_size">订单号:789451236123</view>
									<view class="imga_r_dps">待配送</view>
								</view>
								<view class="imga_mc">商品名称</view>
							</view>
		
							<view class="imga_bot">
								<view class="imga_bot_num">商品数量</view>
								<view class="imga_bot_mon">¥99</view>
							</view>
						</view>
					</view>
					<view class="xian"></view>
					<view class="bottoms">
						<view class="order_xzc"></view>
						<view class="btn_all" >
							<!-- <view class="order_btnl">同意</view> -->
							<view class="order_btn">确认收货</view>
						</view>
					</view>
				</view>
			</view>
			<view class="btn" style="padding: 0rpx 37rpx;">
				<view class="dc_btn">导出</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '订单列表'
				}, {
					name: '(没有)订单中心'
				}, {
					name: '(没有)门店订单',
				}, {
					name: '(没有)变更订单',
				}, {
					name: '(没有)店长订货',
				}],
				current: 0,
				page:1,
				dataList:[],
				total:null,
				headers:[1,2,3],
				data:[
					[1,1,1],
					[1,1,1],
					[1,1,1],
					[1,1,1]
				]
			}
		},
		onLoad() {
			this.page = 1;
			this.dataList = [];
			this.total = null;
			this.getList();
		},
		
		onReachBottom() {
			this.getList();
		},
		
		methods: {
			change(index) {
				this.current = index;
			},
			exportTable() {
				const sheetDate=[this.headers,...this.data];
				const workbook=this.$xlsx.utils.book_new();
				const worksheet=this.$xlsx.utils.aoa_to_sheet(sheetDate);
				this.$xlsx.utils.book_append_sheet(workbook,worksheet,'Sheet1');
				const xlsContent=this.$xlsx.write(workbook,{type:'binary'});
				const blobbData=new Blob([this.$xlsx.writeFile(workbook,{bookType:'xlsx',type:'binary'})],{type:'application/octet-stream'});
				const downloadUrl=URL.createObjectURL(blobbData);
				const link=document.createElement('a');
				link.href=downloadUrl;
				link.download='table.xlsx';
				link.click();
				
				
			},
			getList() {
				if (this.total != null && this.total == this.list.total) {
					return
				}
				this.$api.request({
					url: 'orders',
					method: 'GET',
					data: {
						/* pay_status: uni.getStorageSync('USER_DATA'), */
						page: this.page,
						size: 20
						/* distribution_status: uni.getStorageSync('USER_DATA') */
						
					}
				}).then(res => {
					console.log('res', res);
					if (res.code == 200) {
						console.log(res.data);
						this.total = res.meta.pagination.total
						this.page = this.page + 1
						this.dataList=this.dataList.concat(res.data);
					}
				}).catch(err => {
					console.error(error);
				});
			},
			
		}
	}
</script>
<style>
	page {
		background: #F4F5F7;
	}
</style>
<style scoped lang="scss">
	.order_bg {
		.order_tabs {
			margin-bottom: 20rpx;
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 2;
		}

		.order_all {
			background: #FFF;
			padding: 28rpx 30rpx 30rpx 30rpx;
			border-radius: 20rpx;

			.order_im {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 30rpx;

				.imga {
					position: relative;

					.information_nn {
						width: 78rpx;
						height: 36rpx;
						border-radius: 10rpx 0rpx 10rpx 0rpx;
						background: rgba(243, 6, 13, 1);
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 20rpx;
						line-height: 28rpx;
						color: #FFF;
						position: absolute;
					}

					.information_ns {
						width: 78rpx;
						height: 36rpx;
						border-radius: 0rpx 10rpx 10rpx 0rpx;
						background: rgba(243, 6, 13, 1);
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 20rpx;
						line-height: 28rpx;
						color: #FFF;
						position: absolute;
						top: 44rpx;
					}

					.information_img {
						width: 180rpx;
						height: 180rpx;
						border-radius: 10rpx;
					}
				}

				.imga_r {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 180rpx;
					width: 65%;

					.imga_r_o {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 14rpx;

						.imga_r_size {
							font-size: 26rpx;
							line-height: 36rpx;
							font-weight: 400;
							color: #1E1E1E;
						}

						.imga_r_dps {
							font-size: 24rpx;
							line-height: 33rpx;
							font-weight: 400;
							color: #F3060D;
						}
					}

					.imga_mc {
						font-size: 24rpx;
						line-height: 33rpx;
						font-weight: 400;
						color: #999999;
					}

					.imga_bot {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.imga_bot_num {
							font-size: 24rpx;
							line-height: 33rpx;
							font-weight: 400;
							color: #999999;
						}

						.imga_bot_mon {
							font-size: 30rpx;
							line-height: 42rpx;
							font-weight: 400;
							color: #E93E30;
						}
					}
				}

			}
		}

		.xian {
			width: 100%;
			height: 1rpx;
			background: #F4F5F7;
			margin-bottom: 30rpx;
		}

		.bottoms {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.order_xzc {
				width: 281rpx;
				height: 73rpx;
				font-size: 26rpx;
				font-weight: 400;
				line-height: 36rpx;
				color: #1E1E1E;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}

			.btn_all {
				display: flex;
				align-items: center;

				.order_btnl {
					width: 160rpx;
					height: 64rpx;
					border-radius: 50rpx;
					background: #E5E5E5;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 26rpx;
					font-weight: 500;
					line-height: 36rpx;
					color: #333333;
					margin-right: 20rpx;
				}

				.order_btn {
					width: 160rpx;
					height: 64rpx;
					background: #F3060D;
					border-radius: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 26rpx;
					font-weight: 500;
					line-height: 36rpx;
					color: #FFFFFF;
				}
			}
		}

		.btn {
			width: 100%;
			position: fixed;
			left: 0;
			bottom: 20rpx;
		}

		.dc_btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 88rpx;
			border-radius: 44rpx;
			background: linear-gradient(147.27deg, #F1714E 0%, #E93E30 100%);
			font-size: 32rpx;
			font-weight: 500;
			line-height: 44rpx;
			color: #FFFFFF;
		}
	}
</style>